<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>代理详情</title>
		<link rel="stylesheet" type="text/css" href="../mobile/js/layer/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<script src="./js/jquery-3.1.1.min.js"></script>
        <script src="./js/jquery-1.9.1.js"></script>
        <script src="../mobile/js/layer/layui.js"></script>
        <script src="./js/common.js"></script>
	</head>
	<body>
		
		<div class="main_bg">
			
			<div class="order_head">
					<b class="meunhead">
						<a href="javascript:void(0)" class="levelmeun active">
							<span>代理详情</span><i class="iconfont">&#xe601;</i>
						</a>
						<span class="twolevelmeun">代理详情</span>
					</b>
					<span class="order_num">共3433记录</span>
					<button class="refresh_btn">刷新</button>
					
					<input type="text" class="seachtext" placeholder="请输入关键字" />
					
					<button class="seachbtn">查找</button>
					
					<!-- <button class="iconfont export_btn">&#xe621; 导出设备</button> -->
			</div>
			
			<div class="orderbox">
				<table width="100%" cellpadding="0" cellspacing="0" class="ordertable">
					<thead>
						<tr>
							<th>ID</th>
							<th>设备号</th>
							<th>ProductKey</th>
							<th>DeviceSecret</th>
							<th>二维码</th>
							<th>日期</th>
							<!-- <th>操作</th> -->
						</tr>
					</thead>
					
					<tbody id="devices">
						
					</tbody>
				</table>
				
				
				<div id="page"></div>
			</div>
		</div>
		
<div class="suibian"><img class="imgs" src=""></div>

</body>
<style type="text/css">
	.suibian{
		position: fixed;
		top: 12%;
		left: 25%;
	}
	.imgs{
		display: block;
		width: 500px;
	}
</style>


<script src="./js/jquery-3.1.1.min.js"></script>
<script src="./js/jquery-1.9.1.js"></script>
<!-- <script src="./js/common.js"></script> -->
<script src="../mobile/js/layer/layui.js"></script>


<script>
	//判断全选、反选
	$("#btn1").click(function(){
		if ($(this).prop("checked")) {
			$("input[name='checkbox']").prop("checked",true);
		}else{
			$("input[name='checkbox']").prop("checked",false);
		}
	}) 
	// var url="http://qt.hiberbest.com";//定义全局变量url
	
	// var url="http://www.xiyiji.com";//定义全局变量url
	var urls = window.location.search;
    var daili_id = getUrlParam('daili_id',urls);
	
	function getUrlParam(name, t) {
      console.log(t);
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
      var r = t.substr(1).match(reg);  //匹配目标参数
      if (r != null) return unescape(r[2]); return null; //返回参数值
    }
	//首先加载数据
	$(function(){
		var geturl=url+ "/admin/userlist/daili_details?daili_id="+daili_id;
		$.ajax({
				type: 'get',
				async:false,
				dataType: "json",
				url: geturl,
				success: function (data) {
					// console.log(data);alert(data);
					var count = data.datas.length;
					var device = '';
					for (var k=0; k<count; k++) {
						device +='<tr>';
						device +='<td>'+data.datas[k]['device_id']+'</td>';
						device +='<td>'+data.datas[k]['device_sn']+'</td>';
						device +='<td>'+data.datas[k]['ProductKey']+'</td>';
						device +='<td>'+data.datas[k]['DeviceSecret']+'</td>';
						device +='<td>';
						device +='<a href="javascript:void(0)">';
						device +='<img class="pics" width="50" height="50" src="'+data.datas[k]['QRcode']+'" alt="" />';
						device +='</a>';
						device +='</td>';
						device +='<td>'+data.datas[k]['addtime']+'</td>';
						// d +='<td>';
						// d +='<button class="iconfont or_icon">&#xe69f;<a>编辑</a></button>';
						// d +='</td>';
						device +='</tr>';
					}
					$('#devices').html(device);
					
					layui.use(['laypage', 'layer'], function(){
					var laypage = layui.laypage;
					  //自定义样式
					  laypage.render({
					    elem: 'page'
					    ,count:data.count
					    ,limit: data.limit
					    ,theme: '#35C4F9'
					  });
					});
					//判断全选、反选
					$("input[name='checkbox']").each(function(i){
						$(this).click(function(){
							if ($("input[name='checkbox']").eq(i).prop("checked") == false) {
								$("#btn1").prop('checked',false);
							}else{
								$("#btn1").prop('checked',true);
							}
						});
					});
					//鼠标移入二维码放大
					$('.pics').hover(function(){
						var pics = $(this).prop('src');
						$('.imgs').prop('src',pics);
						$('.suibian').show();
					},function(){
						$('.suibian').hide();
					});

				},error:function(data){
					console.log("请检查您的网络");
				}
			});
	});
	//点击分页加载事件
	$('#page').click(function(){
		var fenye = $('.layui-laypage-curr').find('em').eq(1).html();//获取当前点击的页数
		var geturl=url+ "/admin/userlist/daili_details?fenye="+fenye+"&daili_id="+daili_id;;
		$("#btn1").prop("checked",false);
		$.ajax({
				type: 'get',
				async:false,
				dataType: "json",
				url: geturl,
				success: function (dete) {
					// console.log(dete);alert(dete);
					var count = dete.datas.length;
					var device = '';
					for (var k=0; k<count; k++) {
						device +='<tr>';
						device +='<td>'+dete.datas[k]['device_id']+'</td>';
						device +='<td>'+dete.datas[k]['device_sn']+'</td>';
						device +='<td>'+dete.datas[k]['ProductKey']+'</td>';
						device +='<td>'+dete.datas[k]['DeviceSecret']+'</td>';
						device +='<td>';
						device +='<a href="javascript:void(0)">';
						device +='<img class="pics" width="50" height="50" src="'+dete.datas[k]['QRcode']+'" alt="" />';
						device +='</a>';
						device +='</td>';
						device +='<td>'+dete.datas[k]['addtime']+'</td>';
						device +='</tr>';
					}
					$('#devices').html(device);


						//鼠标移入二维码放大
						$('.pics').hover(function(){
							var pics = $(this).prop('src');
							$('.imgs').prop('src',pics);
							$('.suibian').show();
						},function(){
							$('.suibian').hide();
						});
				},error:function(dete){
					console.log("请检查您的网络");
				}
			});
	});

</script>
		

		
		
	</script>
	
</html>
